/* eslint-disable */
import React, { Component, PropTypes } from 'react';
import ReactEcharts from 'echarts-for-react'

/**
 * 仪表盘
 */
class CockpitDashBoard extends Component {

  static PropTypes = {
    theme: PropTypes.string,
    value: PropTypes.number,
    borderColor: PropTypes.string,
    text: PropTypes.string,
  };

  static defaultProps = {
    theme: "#fff",
    value: 0,
    borderColor: "#00C5FF",
    text: '',
  };

  componentWillUnmount() {
    this.setState = () => {
      return false;
    }
  }

  value = 0;
  state = {
    options: {
      series: [
        {
          name: "",
          type: "gauge",
          radius: '60%',
          clockwise: false, // 仪表盘刻度是否是顺时针增长。
          max: 100,
          min: 0,
          startAngle: 90, // 仪表盘起始角度
          endAngle: 449.99,
          splitNumber: 4, //刻度数量
          axisLine: {
            lineStyle: {  // 仪表盘轴线样式
              color: [  // 仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示
                [0, '#0C2233'],
                [1, '#0C2233']
              ],
              width: 0, // 轴线宽度
              opacity: 0, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
            },
            show: true, // 是否显示仪表盘轴线
          },
          axisTick: { // 刻度样式
            show: true,
            lineStyle: {
              color: 'auto',
              width: 8  // 刻度宽度
            },
            length: 8, // 刻度高度
            splitNumber: 6  // 刻度稀疏度（数值越大，刻度越少）
          },
          pointer: {  // 指针
            show: false
          },
          axisLabel: {  // 刻度
            show: false,
          },
          splitLine: {  // 刻度线
            show: false
          },
          detail: {
            formatter: "{value}",
            offsetCenter: [0, "5%"],
            textStyle: {
              fontSize: 32,
              color: "#fff"
            }
          },
          title: {
            offsetCenter: [0, "60%"]
          },
          data: [{
            name: "",
            value: 0
          }]
        },
        {
          type: 'pie',
          zlevel: 2,
          silent: true,
          radius: ['79%', '80%'],
          startAngle: 90,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: []
        },
        {
          type: 'pie',
          zlevel: 2,
          silent: true,
          radius: ['64%', '66%'],
          startAngle: 90,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: []
        },
        {
          type: 'pie',
          zlevel: 2,
          silent: true,
          radius: ['45%', '46%'],
          startAngle: 90,
          label: {
            normal: {
              show: false
            },
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: []
        },
      ]
    },
  };
  componentDidMount(){
    let t = this;
    this.renderInstrumentPanel();
  };
  // 实例初始化
  chartInit = (chart, name) => {
    this[name] = chart;
  };
  // 渲染仪表盘
  renderInstrumentPanel = () => {
    let t = this;
    const {options} = this.state;
    const { borderColor, value } = this.props;
    //options.series[1].data = this.pie1();
    options.series[1].data = [{
      value: 25,
      itemStyle: {
        normal: {
          borderWidth: 3,
          borderColor: borderColor
        }
      }
    }];
    options.series[2].data = this.pie2();
    this.setState({
      options
    }, function () {
      this.chart.setOption(this.state.options, true);
    });
    this.drawFrame(value)
  };

  // 绘制动画
  drawFrame = (data) => {
    let t = this;
    t.value += parseInt(data / 10);
    if (t.value <= data) {
      window.requestAnimationFrame(t.drawFrame.bind(t,data));
      t.renderChartAnimation(t.value)
    }else {
      t.renderChartAnimation(data)
    }
  };
  // 仪表盘动画渲染
  renderChartAnimation = (val) => {
    let {options} = this.state;
    let {value, theme} = this.props;
    options.series[0].data[0].value = value;
    if (val / 100 <= 0.5) {
      options.series[0].axisLine.lineStyle.color = [
        [val / 100, theme],
        [1, '#0C2233']
      ];
    } else if (val / 100 > 0.5 && val / 100 <= 0.8) {
      options.series[0].axisLine.lineStyle.color = [
        [0.5, theme],
        [val / 100, theme],
        [1, '#0C2233']];
    } else if (val / 100 > 0.8 && val / 100 <= 1) {
      options.series[0].axisLine.lineStyle.color = [
        [0.5, theme],
        [0.8, theme],
        [val / 100, theme],
        [1, '#0C2233']];
    }
    this.setState({
      options
    },() => {
      this.chart.setOption(options, true);
    });
  };
  // 最外圈
  pie1 = () => {
    let dataArr = [];
    for (let i = 0; i < 100; i++) {
      if (i > 25 && i <= 50 || i > 75 && i < 100) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "rgba(88,142,197,0.5)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "#FFA267",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        }
      } else {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 25,
            itemStyle: {
              normal: {
                color: "rgba(88,142,197,0.5)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 20,
            itemStyle: {
              normal: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,0,0,0)"
              }
            }
          })
        }
      }
    }
    return dataArr
  };
  // 内圈
  pie2 = () => {
    let dataArr = [];
    for (let i = 0; i < 100; i++) {
      if (i % 4 === 0) {
        dataArr.push({
          name: (i + 1).toString(),
          value: 25,
          itemStyle: {
            normal: {
              color: "rgba(88,142,197,0.5)",
              borderWidth: 0,
              borderColor: "rgba(0,0,0,0)"
            }
          }
        })
      } else {
        dataArr.push({
          name: (i + 1).toString(),
          value: 20,
          itemStyle: {
            normal: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0,
              borderColor: "rgba(0,0,0,0)"
            }
          }
        })
      }
    }
    return dataArr
  };
  render(){
    let t = this;
    let { options } = t.state;
    let { height, className } = t.props;
    return(
      <div 
        className={className || ''}
        style={{width: '100%', position: 'relative'}} 
        onClick={this.props.onClick}
      >
        <ReactEcharts
          option={options}
          onChartReady={(chart) => this.chartInit(chart, 'chart')}
          notMerge={true}
          lazyUpdate={true}
          style={{height: height || 190}}
        />
        <div 
          style={{
            position: 'absolute',
            bottom: "-71px",
            left: "0px",
            width: "100%",
            textAlign: 'center',
            color: '#fff',
            fontSize: 16
          }}
        >
          {this.props.text}
        </div>
      </div>
    )
  }
}

export default CockpitDashBoard;
